<template>
  <el-dialog
    class="self-dialog"
    :close-on-click-modal="false"
    :model-value="modelValue"
    :title="title"
    :width="width"
    @close="onClose"
  >
    <slot></slot>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onClose">{{ cancelStr }}</el-button>
        <el-button type="primary" @click="onSubmit">
          {{ submitStr }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    modelValue: boolean
    width?: string
    title?: string
    cancelStr?: string
    submitStr?: string
  }>(),
  { width: '376', title: '温馨提示', cancelStr: '取消', submitStr: '确定' },
)

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void
  (e: 'onSubmit', val: boolean): void
  (e: 'onClose', val: boolean): void
}>()

const onClose = () => {
  emit('update:modelValue', false)
  emit('onClose', false)
}
const onSubmit = () => {
  emit('update:modelValue', true)
  emit('onSubmit', true)
}
</script>

<style lang="scss">
.el-dialog {
  padding: 0;

  .el-dialog__header {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 16px;
    line-height: 46px;
    border-bottom: 1px solid $borderCol;

    .el-dialog__headerbtn {
      width: 46px;
      height: 46px;
    }
  }

  .el-dialog__body {
    padding: 16px 16px 30px;
  }

  .el-dialog__footer {
    padding: 0 16px 16px;
  }
}
</style>
